<template>
	<view class="container">

		<!-- Header -->
		<view class="header flex row-right" v-if="activity.length !== 0">
			<view class="choujiang-btn1 md" @click="goTo('/bundle/pages/luck_draw_code/luck_draw_code?id=')">
				{{$zhTran('抽奖记录')}}
			</view>
		</view>

		<!-- Section -->
		<view class="section m-t-16">
			<view class="box-wrap">

				<!-- 中奖名单公示 -->
				<view class="notice flex" v-if="activity.show_winning_list">
					<image class="m-l-18" src="@/bundle/static/images/choujinag_notice.png">
					</image>
					<view style="width: 90%">
						<u-notice-bar bg-color="none" :volume-icon="false" mode="horizontal" :list="list">
						</u-notice-bar>
					</view>
				</view>

				<!-- 抽奖信息 -->
				<view class="message flex row-between nr" v-if="activity.length != 0">
					<view>{{$zhTran('我的积分')}}: {{ activity.user_integral || "-" }}</view>
					<template v-if="activity.show_winning_list">
						<view class="flex" @click="goTo('/bundle/pages/win_prize_code/win_prize_code?id=')">
							<image class="m-r-10" src="@/bundle/static/images/choujiang_name_list.png"></image>
							{{$zhTran('中奖名单')}}
						</view>
					</template>
				</view>

				<!-- 转盘 -->
				<view class="turntable" v-if="activity.length != 0">
					<my-turntable :ids="id" @finish="finish" :params="activity"></my-turntable>
				</view>

				<!-- 次数提示 -->
				<view class="num-tips nr" v-if="activity.length != 0">
					{{ activity.limit || "-" }}
				</view>

				<!-- 活动规则 -->
				<view class="rule" v-if="activity.length != 0">
					<view class="lg bold">{{$zhTran('活动规则')}}</view>
					<text class="sm" style="color: #fcd7d2">{{ activity.rule || "-" }} </text>
				</view>

				<view class="flex-1 flex row-center col-center" v-if="activity.length == 0"
					style="color: #fcd7d2; height: 61vh">
					{{$zhTran('活动已失效')}}
				</view>
			</view>
		</view>

		<!-- Footer -->
		<view class="footer">
			<view>{{$zhTran('本活动的所有奖品，均由商城提供')}}</view>
			<w-jishuzhichi desc-color="#fff" />
		</view>

		<!-- Popup -->
		<u-popup v-model="showResult" mode="center">
			<view class="result-popup flex-col">
				<view class="result-container flex-col row-between" :style="{
					backgroundImage:`url(${$getImageUri('resource/image/shopapi/default/luck_draw_bg.png')})`
				}">
					<view class="flex row-center" style="padding: 0 118rpx; margin-top: 90rpx">
						<text style="color: #f95f2f; font-size: 62rpx; text-align: center">{{
                resultText
            }}</text>
					</view>
					<view class="m-b-20 flex row-center">
						<view class="get-btn flex row-center md br60" @click="showResult = false">
							{{$zhTran('点击收下')}}
						</view>
					</view>
				</view>
				<view style="margin-top: 50rpx" @click="showResult = false">
					<u-icon name="close-circle" size="62" color="#fff"></u-icon>
				</view>
			</view>
		</u-popup>

		<!-- 页面状态 -->
		<page-status :status="pageStatus">
			<template #error>
				<u-empty :text="pageErrorMsg" :src="$getImageUri('resource/image/shopapi/uniapp/empty/order.png')"
					:icon-size="280" />
			</template>
		</page-status>
	</view>
</template>

<script>
	import {
		apiLuckyDrawActivity,
		apiLuckyDrawWinningList
	} from "@/api/luck_draw.js";
	import myTurntable from "@/bundle/components/my-turntable/my-turntable.vue";
	export default {
		components: {
			myTurntable,
		},
		data() {
			return {
				id: "",
				// 中奖名单的轮播
				list: [],
				// 活动的信息
				activity: {},
				// 抽奖结果
				resultText: "",
				// 弹窗控制
				showResult: false,
				// 页面的状态
				pageStatus: "normal",
				pageErrorMsg: "",
			};
		},

		onLoad() {
			try {
				const id = this.$Route.query.id;
				this.id = id;
				console.log(id);
			} catch (e) {
				console.log(e);
				//TODO handle the exception
			}
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}
		},

		onShow() {
			// 活动信息
			this.getLuckyDrawActivityFunc();
			// 中奖名单
			this.getLuckyDrawListFunc();
		},
		methods: {
			// 活动信息
			async getLuckyDrawActivityFunc() {
				apiLuckyDrawActivity({
						id: this.id,
					})
					.then((res) => {
						this.activity = this.$zhTran(res);
					})
					.catch((err) => {
						console.log(err);
						this.pageErrorMsg = err == this.$zhTran("请求参数缺token") ? this.$zhTran("请先登录") : err;
						this.pageStatus = "error";
					});
			},

			// 中奖名单
			async getLuckyDrawListFunc() {
				const res = await apiLuckyDrawWinningList({
					id: this.id,
					page_no: 1,
					page_size: 10,
				});
				this.list = res.lists.map((item) => item.title);
				this.list = this.$zhTran(this.list)
			},

			// 确认收下
			finish(e) {
				this.showResult = true;
				this.resultText = this.$zhTran(e.detail);
			},

			goTo(url, id) {
				uni.navigateTo({
					url: url + this.id,
				});
			},
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #ff2f46;
	}

	.container {
		width: 100%;
		padding-top: 300rpx;
		background: url() no-repeat;
		background-size: 100% auto !important;
		background-repeat: no-repeat;

		.header {
			.choujiang-btn1 {
				color: #7d350c;
				background-color: #fef0b5;
				border-radius: 40rpx 0 0 40rpx;
				box-shadow: 0px 3px 10px #f95f2f;
				padding: 18rpx 24rpx 20rpx 32rpx;
			}
		}

		.section {
			padding: 0 30rpx;

			.box-wrap {
				width: 690rpx;
				padding: 27rpx 28rpx;
				border-radius: 30rpx;
				background: #ed3720;
				border: 12rpx solid #fe6847;

				// 中奖名单公示
				.notice {
					margin: 0 24rpx;
					height: 58rpx;
					padding: 12rpx 0;
					border-radius: 29rpx;
					background: #d30c16;
					border: 2rpx solid #edb17d;

					image {
						width: 32rpx;
						height: 32rpx;
					}
				}

				// 中奖信息奖品等
				.message {
					margin: 30rpx 10rpx;
					color: #fef0b5;

					image {
						width: 28rpx;
						height: 30rpx;
					}
				}

				// 转盘
				.turntable {
					width: 610rpx;
					height: 610rpx;
					overflow: hidden;
					border-radius: 20rpx;
					padding: 35rpx 38rpx;
					background: url() no-repeat;
					background-size: 100% auto !important;
				}

				// 每日抽奖次数提示
				.num-tips {
					color: #fbccc7;
					margin: 16rpx 0;
					text-align: center;
				}

				// 活动规则
				.rule {
					color: #fcd7d2;
					font-size: $-font-size-sm;
					padding: 30rpx 16rpx 30rpx 28rpx;
					border-radius: 20rpx;
					background: #d30c16;
				}
			}
		}

		// Footer
		.footer {
			color: #fff2d9;
			padding: 30rpx 0;
			text-align: center;
			font-size: $-font-size-xs;
		}

		// 弹窗
		.result-popup {
			text-align: center;
			width: 545rpx;
			height: 626rpx;

			.result-container {
				width: 545rpx;
				height: 514rpx;
				background-size: 100% 100%;
			}

			image {
				border: 2rpx solid #fff;
				border-radius: 50%;
			}
		}

		// 按钮
		.get-btn {
			width: 320rpx;
			height: 70rpx;
			color: #7b3200;
			background: linear-gradient(180deg, #fef0b0 0%, #ffa92e 100%);
		}
	}
</style>